<script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
	<input type="text" v-model='n1' />
	<input type="text" v-model='n2' />
	<input type="text" v-model='n3' />
	<input type="button" value="点击" @click="handleAddPersonInfo" />

	<p v-for="(item,i) in list" :key="item.id"><input type="checkbox" /> {{item.id}}--{{item.name}}--{{item.sex}}</p>
</div>

<script type="text/javascript">
	var ve = new Vue({
		el: '#app',
		data: {
			list: [
				{ id: 1, name: '秦始皇', sex: '男' },
				{ id: 2, name: '赵高', sex: '人妖' },
				{ id: 3, name: '李斯', sex: '男' },
				{ id: 4, name: '武则天', sex: '女' },
			],
			n1: '',
			n2: '',
			n3: '',
		},
		methods: {
			handleAddPersonInfo() {
				this.list.unshift({ id: this.n1 + Date.now(), name: this.n2, sex: this.n3 })
			}
		}

	})
</script>